<dom-module id="editor-toolbar-preview">
  <style>

  </style>

  <template>
    <preview-item
      header="editor-toolbar"
      desc="toolbar elements preview"
    >
      <editor-toolbar class="flex-1">
        <editor-input value="text-input"></editor-input>

        <editor-button class="red">
          <i class="fa fa-ban"></i>
        </editor-button>
        <editor-button class="black">
          <i class="fa fa-ban"></i>
        </editor-button>

        <editor-button class="green">
          <i class="fa fa-ban"></i>
        </editor-button>

        <editor-button class="yellow">
          <i class="fa fa-ban"></i>
        </editor-button>

        <editor-button class="orange">
          <i class="fa fa-ban"></i>
        </editor-button>

        <editor-button class="blue">
          <i class="fa fa-ban"></i>
        </editor-button>

        <editor-button class="purple">
          <i class="fa fa-ban"></i>
        </editor-button>

        <editor-button class="white">
          <i class="fa fa-ban"></i>
        </editor-button>

        <editor-unit-input></editor-unit-input>

        <editor-label class="mini">Label</editor-label>

        <editor-checkbox>CheckBox</editor-checkbox>

        <editor-checkbox class="toggle">Toggle</editor-checkbox>

        <editor-select value="foobar">
          <editor-option value="foobar">Foobar</editor-option>
          <editor-option value="hello">Hello</editor-option>
          <editor-option value="world">World</editor-option>
        </editor-select>
        <editor-buttons selected="{{select}}">
          <editor-buttons-item><i class="fa fa-play"></i></editor-buttons-item>
          <editor-buttons-item><i class="fa fa-stop"></i></editor-buttons-item>
        </editor-buttons>
      </editor-toolbar>
    </preview-item>
  </template>

  <script>
    Editor.polymerElement ({
      properties: {
        select: {
          type: Number,
          value: 0
        }
      },
    });
  </script>
</dom-module>
